import React, { Component } from "react";

export default class State2 extends Component {
  //1. 声明 state 属性
  state = {
    isNight: true
  }

  //一. 箭头函数解决 this 指向问题
  // click = () => {
  //   //解构赋值
  //   let {isNight} = this.state;
  //   //3. 更新状态的值
  //   this.setState({
  //     isNight: !isNight
  //   })
  // }

  // constructor(){
  //   super();

  //   this.click = () => {
  //     //解构赋值
  //     let {isNight} = this.state;
  //     //3. 更新状态的值
  //     this.setState({
  //       isNight: !isNight
  //     })
  //   }
  // }

  //二. bind
  constructor(){
    super();

    this.click = this.click.bind(this);
  }

  click(){
    //解构赋值
    let {isNight} = this.state;
    //3. 更新状态的值
    this.setState({
      isNight: !isNight
    })
  }

  render() {
    //解构赋值
    let {isNight} = this.state;

    return (
      <div>
        {/* 2. 在组件内部 使用状态 */}
        <h1>至尊宝, 我是 {isNight ? "青霞" : "紫霞"} 仙子</h1>
        <button onClick={this.click}>点击切换</button>
      </div>
    );
  }
}
